<template>
    <div class="g-mn2">
        <div class="g-mn2c">
            <div class="g-wrap">
                <template v-for="(item, index) in singerMainData" key="index">
                    <TitleBar :title="item.title" :moreRoute="item.moreRoute" :titleType="0" :isMore="true"/>
                    <div class="m-sgerlist">
                        <ul class="m-cvrlst m-cvrlst-5 clear-block">
                            <li v-for="(subItem, index2) in item.singerList" key="index2"
                                :class="{ line: index == 1 && index2 > 4 && index2 < 10, sml: index2 >= 10 }">
                                <div class="u-cover u-cover-5" v-if="index == 0 || index == 1 && index2 < 10">
                                    <img :src="subItem.imgUrl" :alt="subItem.name">
                                    <a :href="subItem.artistRoute" class="msk" :title="`${subItem.name}的音乐`"></a>
                                    <p>
                                        <a :href="subItem.artistRoute" class="nm nm-icn f-thide s-fc0"
                                            :title="`${subItem.name}的音乐`">{{ subItem.name }}</a>
                                        <a class="f-tdn" :href="subItem.homeRoute" :title="`${subItem.name}的个人主页`">
                                            <i class="u-icn u-icn-personal-home"></i>
                                        </a>
                                    </p>
                                </div>

                                <template v-else>
                                    <a :href="subItem.artistRoute" class="nm nm-icn f-thide s-fc0"
                                        :title="`${subItem.name}的音乐`">{{ subItem.name }}</a>
                                    &nbsp;
                                    <a class="icn u-icn u-icn-personal-home" :href="subItem.homeRoute"
                                        :title="`${subItem.name}的个人主页`"></a>
                                </template>
                            </li>
                        </ul>
                    </div>
                </template>

            </div>
        </div>
    </div>
</template>
<script setup>
import TitleBar from '@/components/TitleBar.vue';
import singerMainData from '@/json_data/artist/singer_main_data.json'
</script>
<style lang="scss" scoped>
.m-sgerlist {
    .m-cvrlst {
        margin: 20px 0 0 -17px;

        li.line {
            margin-bottom: 12px;
            border-bottom: 1px dotted #999;
        }

        li.sml {
            height: 30px;
            width: 130px;
            padding-bottom: 0;
            line-height: 23px;
        }

        li {
            padding-left: 17px !important;

            float: left;
            display: inline-block;
            width: 140px;
            height: 188px;
            overflow: hidden;
            padding: 0 0 30px 50px;
            line-height: 1.4;

            .u-cover-5 {
                width: 130px;
                height: 130px;

                .msk {
                    background-position: 0 -680px;
                }
            }

            .u-cover {
                position: relative;
                display: block;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                .msk {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }

            p {
                margin-top: 8px;
                width: 100%;

                .nm-icn {
                    max-width: 76%;
                }

                .nm {
                    display: inline-block;
                    max-width: 85%;
                    vertical-align: middle;
                }

                .u-icn {
                    margin-top: -1px;
                }

                .u-icn-personal-home {
                    position: relative;
                    float: right;
                }

            }

            &.sml {
                max-width: 105px;
            }
        }
    }

    .m-cvrlst-5 {
        li {
            width: 130px;
            height: 154px;


            .nm-icn {
                float: left;
                max-width: 80%;
            }


            &.sml {

                .u-icn-personal-home {
                    float: left;
                    margin: 4px 0 0 2px;
                }

            }
        }
    }

}
</style>